<template>
<!--物流配送-->
  <div class="position-box">

    <el-row>
      <el-col :span="6">
        <el-row>
          <div class="allCar">
            <b style="margin-left: 10px">
              <el-icon>
                <Van/>
              </el-icon>
              全部车辆</b>
          </div>
          <el-collapse v-model="activeNames" @change="handleChange" class="driving-box">
            <el-collapse-item :title=data.drivingTitle name="1">
              <div v-for="driver in data.driving" class="driving">
                <el-row class="rowInside">
                  <b> {{ driver.number }} </b>&nbsp;&nbsp;&nbsp;<b>{{ driver.driverName }}</b>
                </el-row>
                <el-row class="rowInside">
                  {{ driver.position }}
                </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item :title=data.NotTitle name="2">
              <div v-for="driver in data.NotStart" class="driving">
                <el-row class="rowInside">
                  <b> {{ driver.number }} </b>&nbsp;&nbsp;&nbsp;<b>{{ driver.driverName }}</b>
                </el-row>
                <el-row class="rowInside">
                  {{ driver.position }}
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-row>
        <el-row>
        </el-row>
      </el-col>
      <el-col :span="18">
        <map-contain></map-contain>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import MapContain from '../../components/MapContainer/MapContainer.vue'
import {ref, reactive, onMounted} from "vue";
import axios from "axios";

const data = reactive({
  driving: [],
  NotStart: [],
  drivingTitle: "",
  NotTitle: ""
})
onMounted(() => {
  initDriver();

})
let initDriver = () => {
  axios({
    url: "http://localhost:8080/deliver/selectDriving",
    method: "get",
    params: ""
  }).then((res) => {
    data.driving = res.data.data;
    initDrivingTitle();
  })

  axios({
    url: "http://localhost:8080/deliver/selectWillDriving",
    method: "get",
    params: ""
  }).then((res) => {
    data.NotStart = res.data.data;
    initNotTitle();
  })
}
let initDrivingTitle = () => {
  data.drivingTitle = "配送中(共" + data.driving.length + "辆)";
}

let initNotTitle = () => {
  data.NotTitle = "待配送(共" + data.NotStart.length + "辆)";
}

const activeNames = ref(['1'])
</script>

<style scoped>
.position-box {
  width: 100%;
  height: 100%;
}

.driving-box {
  width: 100%;
  height: 100%;
}

.driving {
  border: 3px #7be57b solid;
  border-radius: 10px;
  margin: 5px;
}

.allCar {
  width: 100%;
  line-height: 40px;
  height: 40px;
  color: #7e6500;
  background: #e7daa3;

}

.rowInside {
  margin-left: 10px;
}
</style>